<template>
  <view>
    <view
      style="
        background: #fff0c3;
        border-radius: 16rpx;
        display: flex;
        margin: 20rpx 24rpx 0 24rpx;
        padding: 23rpx;
      ">
      <image
        src="https://static.tospurfang.com/asset/warning.png"
        mode="scaleToFill"
        style="width: 32rpx; height: 32rpx" />
      <view style="flex: 1; font-size: 24rpx; color: #907c3a; margin-left: 15rpx">
        <view style="font-weight: 600">推荐客户说明</view>
        <view>
          动动手指，就有机会创收！录入客户投资需求信息，我们将安排专人持续匹配优质资产，客户信息全程保密。大家联手，一起资源变现🤝
        </view>
      </view>
    </view>
    <view style="background: #ffffff; border-radius: 16rpx; padding: 0 23rpx; margin: 20rpx 24rpx">
      <template v-for="item in options" :key="item.key">
        <view v-if="!item.hide" class="dt-flex-1">
          <edit-item ref="editRef" v-model="info" :option="item" />
        </view>
      </template>
    </view>
    <view
      @click="onSumbit"
      style="
        width: 702rpx;
        height: 100rpx;
        background: #042275;
        border-radius: 16rpx;
        margin: 24rpx;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 100rpx;
      ">
      确认推荐
    </view>
    <view style="height: 100rpx"></view>
  </view>
  <tip-modal ref="tipRef"></tip-modal>
  <city-modal ref="cityRef" @ok="onCity" />
</template>

<script setup>
  import { messageStore } from '@/biz/message'
  import cityModal from '@/com/city-modal.vue'
  import editItem from '@/com/editItem.vue'
  import tipModal from '@/com/tip-modal.vue'

  import { onLoad } from '@dcloudio/uni-app'
  import dt from '@dt/dt'
  import { reactive, ref, watch } from 'vue'
  import mgr from './biz'

  const info = ref({})
  const [tipRef, cityRef, editRef] = [ref(), ref(), ref()]

  onLoad(() => {
    messageStore().show()
  })

  function onSumbit() {
    if (!editRef.value.some((item) => !item.checkRequired())) {
      mgr.customerCreate(info.value).then(
        (res) => {
          tipRef.value.show({
            success: true,
            title: '提交成功',
            content: '请等待后台工作人员与您联系',
            ok: () => {
              info.value = {}
            }
          })
        },
        (err) => {
          uni.showToast({ icon: 'none', title: err.message })
        }
      )
    }
  }

  watch(
    () => info.value.propertyType,
    (n) => {
      coverArea.hide = n != 'industrialPark'
      if (coverArea.hide) info.value.coverArea = null
      plotRatio.hide = n != 'industrialPark'
      if (plotRatio.hide) info.value.plotRatio = null
      roomCount.hide = n != 'hotel'
      if (roomCount.hide) info.value.roomCount = null
      starStandard.hide = n != 'hotel'
      if (starStandard.hide) info.value.starStandard = null
    }
  )

  function onCity(res) {
    info.value.cityName = res.city.cityName
    info.value.cityId = res.city.cityCode
    cityRef.value.hide()
  }

  const coverArea = reactive({
    key: 'coverArea',
    title: '占地面积(万㎡)',
    placeholder: '请输入占地面积',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true
  })

  const plotRatio = reactive({
    key: 'plotRatio',
    title: '容积率',
    placeholder: '请输入容积率',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true,
    blur: () => {
      if (info.value.plotRatio) info.value.plotRatio = Number(info.value.plotRatio).toFixed(2)
    }
  })

  const roomCount = reactive({
    key: 'roomCount',
    title: '房间数量(个)',
    placeholder: '请输入房间数量',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true
  })

  const starStandard = reactive({
    key: 'starStandard',
    title: '星级标准',
    placeholder: '请输入星级标准',
    type: 'input',
    required: true,
    max: 20,
    hide: true
  })

  const options = reactive([
    {
      key: 'customerName',
      title: '客户名称',
      type: 'input',
      placeholder: '请输入客户名称',
      required: true,
      max: 20
    },
    {
      key: 'customerType',
      title: '客户类型',
      placeholder: '请选择客户类型',
      type: 'select',
      dropList: dt.dictInfo().CustomerType,
      required: true
    },
    {
      key: 'cityName',
      title: '客户所在地',
      placeholder: '请选择客户所在地',
      type: 'event',
      required: true,
      click: () => {
        cityRef.value.show()
      }
    },
    {
      key: 'wishArea',
      title: '求购区域',
      placeholder: '请输入求购区域',
      type: 'input',
      required: true,
      max: 20
    },
    {
      key: 'wishPrice',
      title: '求购总价范围',
      placeholder: '请选择求购总价范围',
      type: 'select',
      dropList: dt.dictInfo().wishPrice,
      required: true
    },
    {
      key: 'propertyType',
      title: '物业类型',
      placeholder: '请选择物业类型',
      dropList: dt.dictInfo().propertyType,
      type: 'select',
      required: true
    },
    coverArea,
    plotRatio,
    {
      key: 'canSaleArea',
      title: '总可售面积(万㎡)',
      placeholder: '请输入总可售面积',
      type: 'input',
      input: 'digit',
      required: true
    },
    roomCount,
    starStandard,
    {
      key: 'otherRequire',
      title: '其他要求',
      placeholder: '请输入补充说明，限200字',
      type: 'textarea',
      required: true,
      max: 200
    }
  ])
</script>
<style lang="scss" scoped></style>
